drow2DAxes(context);
var input = document.getElementsByTagName("input");
var show = document.getElementById('show');
var refurbish = document.getElementById('refurbish');
refurbish.onclick = function () {
    location.reload();
}

function addHint(){
    for(let i=0;i<=23;i++){
        input[i].onmouseover = hint;
    }
}
addHint();

async function buOnclick() {
    if(input[0].value == "" || 
    input[1].value == "" || 
    input[12].value == "" || 
    input[13].value == ""){
        alert("请输入完整！");
        return;
    }
    var a1 = input[0].value * 1;
    var a2 = input[1].value * 1;
    var c11 = input[2].value * 1;
    var d1 = input[3].value * 1;
    var e1 = input[4].value * 1;
    var f1 = input[5].value * 1;
    var g1 = input[6].value * 1;
    var h1 = input[7].value * 1;
    var i1 = input[8].value * 1;
    var j1 = input[9].value * 1;
    var k1 = input[10].value * 1;
    var l1 = input[11].value * 1;
    var b1 = input[12].value * 1;
    var b2 = input[13].value * 1;
    var c2 = input[14].value * 1;
    var d2 = input[15].value * 1;
    var e2 = input[16].value * 1;
    var f2 = input[17].value * 1;
    var g2 = input[18].value * 1;
    var h2 = input[19].value * 1;
    var i2 = input[20].value * 1;
    var j2 = input[21].value * 1;
    var k2 = input[22].value * 1;
    var l2 = input[23].value * 1;

    h1 = a1 * c11 + a2 * c2;
    h2 = b1 * c11 + b2 * c2;
    i1 = a1 * d1 + a2 * d2;
    i2 = b1 * d1 + b2 * d2;
    j1 = a1 * e1 + a2 * e2;
    j2 = b1 * e1 + b2 * e2;
    k1 = a1 * f1 + a2 * f2;
    k2 = b1 * f1 + b2 * f2;
    l1 = a1 * g1 + a2 * g2;
    l2 = b1 * g1 + b2 * g2;

    var bb = Math.max(Math.abs(a1), Math.abs(a2), Math.abs(b1), Math.abs(b2),
        Math.abs(c11), Math.abs(c2), Math.abs(d1), Math.abs(d2), Math.abs(f1), Math.abs(f2),
        Math.abs(g1), Math.abs(g2), Math.abs(h1), Math.abs(h2), Math.abs(i1), Math.abs(i2),
        Math.abs(j1), Math.abs(j2), Math.abs(k1), Math.abs(k2), Math.abs(l1), Math.abs(l2));

    //checkAxes(mycanvas, context, bb, bb, 2);
    context.fillStyle = "red";
    context.font = "bold italic 20pt Times new roman";
    context.lineWidth = 3;
    drowVector(context, c11, c2, "red");
    context.fillText('c', c11 * c1, -c2 * c1);
    drowVector(context, d1, d2, "yellow");
    context.fillText('d', d1 * c1, -d2 * c1);
    drowVector(context, e1, e2, "blue");
    context.fillText('e', e1 * c1, -e2 * c1);
    drowVector(context, f1, f2, "green");
    context.fillText('f', f1 * c1, -f2 * c1);
    drowVector(context, g1, g2, "#FF00FF");
    context.fillText('g', g1 * c1, -g2 * c1);

    /*
     *伸缩旋转c --> h
     */
    await Sleep(3000);
    clearCanvas(context, 2);
    var hx = (c11 - h1) / 10;
    var hy = (c2 - h2) / 10;
    for (var i = 1; i <= 10; i++) {
        clearCanvas(context, 2);
        drowVector(context, d1, d2, "yellow");
        context.fillText('d', d1 * c1, -d2 * c1);
        drowVector(context, e1, e2, "blue");
        context.fillText('e', e1 * c1, -e2 * c1);
        drowVector(context, f1, f2, "green");
        context.fillText('f', f1 * c1, -f2 * c1);
        drowVector(context, g1, g2, "#FF00FF");
        context.fillText('g', g1 * c1, -g2 * c1);
        drowVector(context, c11 - hx * i, c2 - hy * i, "red");
        await Sleep(200);
    }
    input[7].value = h1;
    input[19].value = h2;

    /*
     *伸缩旋转到d --> i
     */
    await Sleep(3000);
    hx = (d1 - i1) / 10;
    ny = (d2 - i2) / 10;
    for (var i = 1; i <= 10; i++) {
        clearCanvas(context, 2);
        drowVector(context, h1, h2, "red");
        context.fillText('h', h1 * c1, -h2 * c1);
        drowVector(context, e1, e2, "blue");
        context.fillText('e', e1 * c1, -e2 * c1);
        drowVector(context, f1, f2, "green");
        context.fillText('f', f1 * c1, -f2 * c1);
        drowVector(context, g1, g2, "#FF00FF");
        context.fillText('g', g1 * c1, -g2 * c1);
        drowVector(context, d1 - hx * i, d2 - hy * i, "yellow");
        await Sleep(200);
    }
    input[8].value = i1;
    input[20].value = i2;

    /*
     *伸缩旋转e --> j
     */
    await Sleep(3000);
    hx = (e1 - j1) / 10;
    hy = (e2 - j2) / 10;
    for (var i = 1; i <= 10; i++) {
        clearCanvas(context, 2);
        drowVector(context, h1, h2, "red");
        context.fillText('h', h1 * c1, -h2 * c1);
        drowVector(context, i1, i2, "yellow");
        context.fillText('i', i1 * c1, -i2 * c1);
        drowVector(context, f1, f2, "green");
        context.fillText('f', f1 * c1, -f2 * c1);
        drowVector(context, g1, g2, "#FF00FF");
        context.fillText('g', g1 * c1, -g2 * c1);
        drowVector(context, e1 - hx * i, e2 - hy * i, "blue");
        await Sleep(200);
    }
    input[9].value = j1;
    input[21].value = j2;


    /*
     *伸缩旋转 f --> k
     */
    await Sleep(3000);
    hx = (f1 - k1) / 10;
    hy = (f2 - k2) / 10;
    for (var i = 1; i <= 10; i++) {
        clearCanvas(context, 2);
        drowVector(context, h1, h2, "red");
        context.fillText('h', h1 * c1, -h2 * c1);
        drowVector(context, i1, i2, "yellow");
        context.fillText('i', i1 * c1, -i2 * c1);
        drowVector(context, j1, j2, "blue");
        context.fillText('j', j1 * c1, -j2 * c1);

        drowVector(context, g1, g2, "#FF00FF");
        context.fillText('g', g1 * c1, -g2 * c1);

        drowVector(context, f1 - hx * i, f2 - hy * i, "green");
        await Sleep(200);
    }
    input[10].value = k1;
    input[22].value = k2;

    /*
     *伸缩旋转 g --> l
     */
    await Sleep(3000);
    hx = (g1 - l1) / 10;
    hy = (g2 - l2) / 10;
    for (var i = 1; i <= 10; i++) {
        clearCanvas(context, 2);
        drowVector(context, h1, h2, "red");
        context.fillText('h', h1 * c1, -h2 * c1);
        drowVector(context, i1, i2, "yellow");
        context.fillText('i', i1 * c1, -i2 * c1);
        drowVector(context, j1, j2, "blue");
        context.fillText('j', j1 * c1, -j2 * c1);
        drowVector(context, k1, k2, "green");
        context.fillText('k', k1 * c1, -k2 * c1);

        drowVector(context, g1 - hx * i, g2 - hy * i, "#FF00FF");
        await Sleep(200);
    }
    input[11].value = l1;
    input[23].value = l2;

    var ff = checkAxes(mycanvas, context, bb, bb, 2);
    if (ff) {
        clearCanvas(context, 2);
        drowVector(context, h1, h2, "red");
        context.fillText('h', h1 * c1, -h2 * c1);
        drowVector(context, i1, i2, "yellow");
        context.fillText('i', i1 * c1, -i2 * c1);
        drowVector(context, j1, j2, "blue");
        context.fillText('j', j1 * c1, -j2 * c1);
        drowVector(context, k1, k2, "green");
        context.fillText('k', k1 * c1, -k2 * c1);
        drowVector(context, l1, l2, "#FF00FF");
    }
    context.fillText('l', l1 * c1, -l2 * c1);
}

show.onclick = buOnclick;